<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('pApply.apply')"></Crumb>
        <div class="content">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-plus"
                       @click="open"
                       v-if="urlAvailible('jianzhan-purchase-operate')">{{$t('pApply.apply')}}
            </el-button>
            <el-input v-model="key"
                      :placeholder="$t('pApply.purchaseNumber')"
                      prefix-icon="el-icon-search"
                      size="small"
                      style="width: 200px;margin-left: 10px;">
            </el-input>
            <el-input v-model="key1"
                      :placeholder="$t('con.salesOrder')"
                      prefix-icon="el-icon-search"
                      size="small"
                      style="width: 200px;margin-left: 10px;"></el-input>
            <div class="table-wrapper">
                <el-table
                        :data="purchaseLists"
                        border
                        @filter-change="filterChange"
                        row-key="id "
                        @expand-change="expand"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <div>
                                <span>{{$t('pApply.sale')}}</span>
                                <div>{{$t('download')}}：<a :href="scope.row.salesFile">{{scope.row.salesFile |
                                    getFileName}}</a></div>
                            </div>
                            <div>
                                <span>{{$t('pApply.buy')}}</span>
                                <div>{{$t('download')}}：
                                    <div v-if="Array.isArray(scope.row.purchaseFile)"
                                         v-for="item in scope.row.purchaseFile" :key="item">
                                        <a :href="item">{{item | getFileName}}</a>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <span>{{$t('pApply.box')}}</span>
                                <div v-for="(value) in scope.row.uploadFileVo.boxList " :key="value"><a :href="value">{{value
                                    | getFileName}}</a></div>
                            </div>
                            <div>
                                <span>{{$t('con.consignment')}}</span>
                                <div v-for="(value) in scope.row.uploadFileVo.purchaseContractList" :key="value"><a
                                        :href="value">{{value | getFileName}}</a></div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="purchaseNumber"
                            :label="$t('pApply.purchaseNumber')"
                    >
                    </el-table-column>
                    <el-table-column
                            column-key="supplySide"
                            prop="supplySide"
                            :filter-multiple="false"
                            :label="$t('pApply.supplySide')"
                            :filters="supplierFilter"
                    >
                    </el-table-column>
                    <el-table-column
                            column-key="destinationPort"
                            prop="destinationPort"
                            :label="$t('pApply.destinationPort')"
                            :filter-multiple="false"
                            :filters="destFilter"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="applicationDateStr"
                            :label="$t('pApply.applicationDateStr')">
                    </el-table-column>
                    <el-table-column
                            prop="salesOrder"
                            :label="$t('con.salesOrder')">
                    </el-table-column>
                    <el-table-column
                            prop="salesPrice"
                            :label="$t('pApply.salesPrice')">
                        <template slot-scope="scope">
                            <span>RP{{scope.row.salesPrice | changeMoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="purchasePrice"
                            :label="$t('pApply.purchasePrice')">
                        <template slot-scope="scope">
                            <span>¥{{scope.row.purchasePrice | changeMoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    >
                        <template slot-scope="scope">
                            <el-button type="primary"
                                       icon="el-icon-edit"
                                       @click="openEdit(scope.row)">{{$t('edit')}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            @current-change="changePage"
                            layout="prev, pager, next"
                            :total="total"></el-pagination>
                </div>
            </div>
            <el-dialog
                    :title="$t('pApply.apply')"
                    :visible.sync="dialogVisible"
                    width="80%"
                    :before-close="closeDialog"
            >
                <el-form ref="form" :model="purchase" label-width="130px" inline>
                    <div>
                        <el-form-item :label="$t('pApply.purchaseNumber')">
                            <el-input v-model="purchase.purchaseNumber"
                                      size="small"
                                      type="text"
                                      :placeholder="$t('pApply.purchaseNumber')"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item :label="$t('pApply.supplySide')">
                        <el-select v-model="purchase.supplySide" :placeholder="$t('pApply.supplySide')" size="small">
                            <el-option
                                    v-for="item in ['IEL-ITSS','IEL-TID','IEL-IEC','IEL-KST']"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('pApply.destinationPort')">
                        <el-select v-model="purchase.destinationPort"
                                   :placeholder="$t('pApply.destinationPort')"
                                   size="small">
                            <el-option
                                    v-for="item in ['MOR','WEDA','MKS','JAK','SUB']"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('pApply.applicationDateStr')">
                        <el-date-picker size="small"
                                        v-model="purchase.applicationDateStr"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        :placeholder="$t('pApply.applicationDateStr')"></el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('pApply.applicant')">
                        <el-input v-model="purchase.applicant" :placeholder="$t('pApply.applicant')"
                                  size="small"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="订单号">-->
                    <!--<el-input v-model="purchase.orderNumber" placeholder="Order Number" size="small"></el-input>-->
                    <!--</el-form-item>-->
                    <div>
                        <span>{{$t('pApply.salesPrice')}}</span>
                        <el-form-item :label="$t('pApply.currency')">
                            <el-select v-model="purchase.salesCurrency" :placeholder="$t('pApply.currency')"
                                       size="small">
                                <el-option
                                        v-for="item in ['Rp','¥']"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('pApply.amount')">
                            <el-currency-input v-model="purchase.salesPrice"
                                               :type=10
                                               :placeholder="$t('pApply.salesPrice')"
                                               size="small"/>
                        </el-form-item>
                        <el-form-item :label="$t('con.salesOrder')">
                            <el-input v-model="purchase.salesOrder"
                                      :placeholder="$t('con.salesOrder')"
                                      size="small"></el-input>
                        </el-form-item>
                        <label for="sale"
                               v-if="urlAvailible('jianzhan-contract-operate')">
                            {{$t('pApply.uploadSale')}}
                        </label>
                        <span>{{purchase.salesFile | getFileName}}</span>
                        <input type="file" @change="fileChange" id="sale" v-show="false">
                    </div>
                    <div>
                        <span>{{$t('pApply.purchasePrice')}}</span>
                        <el-form-item :label="$t('pApply.currency')">
                            <el-select v-model="purchase.purchaseCurrency" :placeholder="$t('pApply.purchasePrice')"
                                       size="small">
                                <el-option
                                        v-for="item in ['Rp','¥']"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('pApply.amount')">
                            <el-currency-input v-model="purchase.purchasePrice" :type=10
                                               :placeholder="$t('pApply.amount')"
                                               size="small"/>
                        </el-form-item>
                        <label for="purchase" v-if="urlAvailible('jianzhan-contract-operate')">
                            {{$t('pApply.uploadBuy')}}
                        </label>
                        <div v-for="item in purchase.purchaseFile">{{item | getFileName}}</div>
                        <input type="file" @change="fileChange1" id="purchase" v-show="false">
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                    <el-button type="primary" @click="submitForm"
                               v-if="urlAvailible('jianzhan-contract-operate')">{{$t('confirm')}}</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import mixins from '../../util/mixins'
    import {getFileName, money} from "../../util";
    import {getPurchaseList, addPurchase, modPurchase} from "../../api/jianzhan";
    import {upLoadFiles} from "../../api";
    import {ERROR_OK} from "../../util/config";
    import authMixins from '../../util/authMixins'

    export default {
        name: "purchase",
        mixins: [mixins, authMixins],
        filters: {
            getFileName(name) {
                if (name) {
                    return getFileName(name)
                } else {
                    return ''
                }

            },
            changeMoney(m) {
                return money(m)
            }
        },
        data() {
            return {
                key1: '',
                key: '',
                destFilter: [
                    {
                        text: 'MOR',
                        value: 'MOR'
                    },
                    {
                        text: 'WEDA',
                        value: 'WEDA',
                    },
                    {
                        text: 'JAK',
                        value: 'JAK'
                    },
                    {
                        text: 'SUB',
                        value: 'SUB'
                    },
                ],
                destinationPort: '',
                supplySide: '',
                supplierFilter: [
                    {text: 'IEL-ITSS', value: 'IEL-ITSS'},
                    {text: 'IEL-TID', value: 'IEL-TID'},
                    {text: 'IEL-IEC', value: 'IEL-IEC'},
                    {text: 'IEL-KST', value: 'IEL-KST'},
                ],
                purchaseList: [],
                dialogVisible: false,
                purchase: {
                    purchaseNumber: '',
                    supplySide: '',
                    destinationPort: '',
                    applicationDateStr: '',
                    applicant: '',
                    orderNumber: '',
                    salesPrice: 0,
                    salesCurrency: '',
                    salesOrder: '',
                    salesFile: '',
                    purchasePrice: 0,
                    purchaseCurrency: '',
                    purchaseFile: []
                }
            }
        },
        created() {
            this.getPurchaseList()
        },
        methods: {
            open() {
                this.dialogVisible = true;
                this.purchase.orderNumber = Math.random().toFixed(3) * 1000

            },
            filterChange(row) {
                Object.keys(row).forEach(item => {
                    this[item] = row[item][0]
                })
            },
            async getPurchaseList() {
                const {status, data, msg} = await getPurchaseList();
                if (status === ERROR_OK) {
                    this.total = data.length;
                    this.purchaseList = data;
                } else {
                    this.$notify.error(msg)
                }
            },
            async submitForm() {
                const {
                    id,
                    salesOrder,
                    supplySide,
                    destinationPort,
                    applicationDateStr,
                    applicant,
                    orderNumber,
                    salesPrice,
                    salesCurrency,
                    salesFile,
                    purchasePrice,
                    purchaseCurrency,
                    purchaseNumber,
                } = this.purchase;
                let {purchaseFile} = this.purchase
                purchaseFile = purchaseFile.join(',')
                if (!this.purchase.id) {
                    const {status, msg} = await addPurchase(
                        {
                            supplySide,
                            salesOrder,
                            destinationPort,
                            applicationDateStr,
                            applicant,
                            salesPrice,
                            salesCurrency,
                            salesFile,
                            purchasePrice,
                            purchaseCurrency,
                            purchaseFile,
                            purchaseNumber,
                            orderNumber,

                        }
                    );
                    if (status === ERROR_OK) {
                        this.getPurchaseList();
                        this.dialogVisible = false;
                        this.$notify.success('添加成功');
                        this.clear();
                    } else {
                        this.$notify.error(msg)
                    }
                } else {
                    const {status, msg} = await modPurchase(
                        {
                            id,
                            supplySide,
                            salesOrder,
                            destinationPort,
                            applicationDateStr,
                            applicant,
                            orderNumber,
                            salesPrice,
                            salesCurrency,
                            salesFile,
                            purchasePrice,
                            purchaseCurrency,
                            purchaseFile,
                            purchaseNumber
                        }
                    );
                    if (status === ERROR_OK) {
                        this.getPurchaseList();
                        this.dialogVisible = false;
                        this.$notify.success('修改成功');
                        this.clear();
                    } else {
                        this.$notify.error(msg)
                    }
                }
            },
            expand(row) {
                if (!Array.isArray(row.purchaseFile) && row) {
                    this.$set(row, 'purchaseFile', row.purchaseFile.split(','))
                }
                console.log(row);
            },
            openEdit(row) {
                if (!Array.isArray(row.purchaseFile)) {
                    row.purchaseFile = row.purchaseFile.split(',')
                }
                this.purchase = row;
                this.dialogVisible = true
            },
            clear() {
                this.purchase = {
                    id: '',
                    purchaseNumber: '',
                    supplySide: '',
                    salesOrder: '',
                    destinationPort: '',
                    applicationDateStr: '',
                    applicant: '',
                    orderNumber: '',
                    salesPrice: 0,
                    salesCurrency: '',
                    salesFile: '',
                    purchasePrice: 0,
                    purchaseCurrency: '',
                    purchaseFile: []
                }
            },
            async fileChange(e) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {
                    this.$set(this.purchase, 'salesFile', file_path[0])
                }
            },
            closeDialog(done) {
                if (window.confirm('是否要关闭表单，表单中的数据都会丢失')) {
                    this.clear();
                    done();
                }
            },
            async fileChange1(e) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {

                    this.$set(this.purchase, 'purchaseFile', this.purchase.purchaseFile.concat(file_path))
                }
            },
        },
        computed: {
            // purchaseNumber() {
            //         const {supplySide,applicationDateStr,orderNumber} = this.purchase;
            //         return supplySide+"-"+applicationDateStr+"-"+orderNumber
            // },
            purchaseLists() {
                let {destinationPort, supplySide} = this;
                destinationPort = destinationPort || '';
                supplySide = supplySide || '';
                return this.purchaseList.filter(item => {
                    return item.destinationPort.includes(destinationPort)
                }).filter(item => {
                    return item.supplySide.includes(supplySide)
                }).filter(item => item.purchaseNumber.toLowerCase().includes(this.key.toLowerCase())
                ).filter(item => {
                    return item.salesOrder ? item.salesOrder.toLowerCase().includes(this.key1.toLowerCase()) : true
                })
            }
        },
        watch: {
            purchaseLists(list) {
                this.total = list.length
            }
        },
        components: {
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/variable";
    @import "../../css/mixins";

    .content {
        @include content()
    }

    label {
        cursor: pointer;
        display: inline-block;
        vertical-align: center;
        margin-top: 3px;
        width: 150px;
        height: 30px;
        line-height: 30px;
        background: $bg-theme;
        color: white;
        text-align: center;
    }
</style>